<!DOCTYE html PUBLIC"-//W3C//DTD XTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv="Content-Type" content="text/html;charset="gb2312"/>
<title>热点图</title>
<link rel="stylesheet" type="text/css" href="10.css"/>
 <style>
    body{
        background-color: antiquewhite;
    }
    .map{
        width:840px;
        height:552px;
        background: url(map.png)no-repeat center;/*引入热点图的背景*/
    }
    .city{
        position: absolute;
        top:200px;
        left:400px;
    }
    .tb{
        top:500px;
        left:99px;
    }
    /*引入小圆角*/
    .dotted{
        width:8px;
        height: 8px;
        background:#09f;
        border-radius: 50%;
    }/*默认字体为16px 而圆点只有8px  会偏上 可以调一下它的位置*/
    .city div[class^="pulse"]{
        /* 保证我们小波纹在父级盒子里面水平居中*/
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
         width:8px;
         height:8px;
         box-shadow: 0 0 12px #009dfd;/*水平偏移量 垂直偏移量 模糊半径 扩散半径 阴影颜色*/ 
         border-radius: 50%;
         animation: pulse 1.3s linear infinite ;
         /*linear 平均速度* infinite 无限的/
       /*  animation: name duration timing-function delay iteration-count direction fill-mode; */
    }/*E[att^="val"]匹配具有att属性且值以val开头的E元素*/
    
    /* 要考虑权重问题 
       如果只写 .pulse2 那么就会不显示 */
    .city div.pulse2{
        animation-delay:0.4s;
    }
    /*animation-delay 里面必须写单位*/
    .city div.pulse3{
        animation-delay: 0.8s;
    }
    @keyframes pulse {
        0%{}
        70%{
            width:40px;
            height: 40px;
            opacity: 1;
        }
        100%{
            width: 80px;
            height: 80px;
            opacity: 0;
        }
    }/* 只改变 盒子的长和宽 那么盒子的阴影不会发生改变 ;
       但是如果用 scale 就会改变 整个大小以及阴影;*/
 </style>
</head>
<body>
<div class="map">
  <div class="city">
    <div class="dotted"></div>
    <div class="pulse1"></div>
    <div class="pulse2"></div>
    <div class="pulse3"></div>
  </div>
  <div class="top">
    <div class="dotted"></div>
    <div class="pulse1"></div>
    <div class="pulse2"></div>
    <div class="pulse3"></div>
  </div>
</div>




</body>
</html>